<template>
  <div class="upLoadHeadPic">
    <Upload
      ref="upload"
      :show-upload-list="false"
      :default-file-list="defaultList"
      :before-upload="handleBeforeUpload"
      :on-success="handleSuccess"
      :format="['jpg','jpeg','png']"
      :max-size="2048"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      type="drag"
      action="//jsonplaceholder.typicode.com/posts/"
      style="display: inline-block;width:58px;">
      <div class="uploaded-img" style="width: 58px;height:58px;line-height: 58px;">
        <div class="upload-list" v-for="item in uploadList">
          <template v-if="item.status === 'finished'">
            <img :src="item.url" >
            <div class="upload-list-cover"></div>
          </template>
          <template v-else>
            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
          </template>
        </div>
      </div>
    </Upload>
  </div>
</template>

<script>
  export default {
    name: "upLoadHeadPic",  // 上传头像
    props: {
      headPic: {
        type: String,
        default: '//file.gaozhaoedu.com/avatar/p31.jpg'
      }
    },
    data() {
      return {
        defaultList: [
          {
            'name': 'a42bdcc1178e62b4694c830f028db5c0',
            'url': this.headPic
          }
        ],
        imgUrl: '',
        visible: false,
        uploadList: []
      }
    },
    mounted () {
      this.uploadList = this.$refs.upload.fileList;
    },
    methods: {
      // 删除原来的头像
      handleRemove () {
        this.$refs.upload.fileList.splice(0, 1);
      },
      // 上传之前钩子
      handleBeforeUpload (file) {
        console.log(file);
        // 操作
        // 调用接口，上传服务器成功后将网络地址返回 并return  true
        // 若上传失败 return  false 并给出提示
        this.imgUrl = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202105%2F29%2F20210529001057_aSeLB.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660439634&t=18c24c3b68ee320e76189836a3826cf1';
        let flag = true;
        if(!flag) {
          let timer = setTimeout(() => {
            this.$Message.error('文件上传失败，请检查图片格式');
            clearTimeout(timer)
          }, 1000);
        }else{
          let timer = setTimeout(() => {
            this.$Message.success('文件上传成功!');
            clearTimeout(timer)
          }, 1000);
        }
        return flag;
      },
      handleSuccess (res, file) {
        // 因为上传过程为实例，这里模拟添加 url
        file.url = this.imgUrl;
        file.name = '7eb99afb9d5f317c912f08b5212fd69a';
        this.handleRemove()
      },
      handleFormatError (file) {
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
        });
      },
      handleMaxSize (file) {
        this.$Notice.warning({
          title: '超出文件大小限制',
          desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  .upLoadHeadPic {
    .uploaded-img{
      width: 58px;
      height:58px;
      line-height: 58px;
      .upload-list{
        display: inline-block;
        width: 58px;
        height: 58px;
        text-align: center;
        line-height: 58px;
        /*border: none;*/
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        /*box-shadow: 0 1px 1px rgba(0,0,0,.2);*/
        /*margin-right: 4px;*/
        img{
          width: 100%;
          height: 100%;
        }
        .upload-list-cover{
          display: none;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0,0,0,0.4);
        }
      }
      .upload-list:hover{
        .upload-list-cover{
          display: block;
        }
      }
    }
  }
</style>
